<!DOCTYPE html>
<html>
    <head>
        <title>Space Finder</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../../script/semantic/semantic.min.css">
        <script type="text/javascript" src="../../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../../script/semantic/semantic.min.js"></script>
        <script type="text/javascript" src="../../../script/ao_module.js"></script>
        <style>

        </style>
    </head>
    <body>
        <div class="ui container">
            <p>Reclaim storage space by removing large files</p>
            <div class="ui small buttons">
                <button class="ui primary basic button" onclick="initFileList(20);">20 Results (Fast)</button>
                <button class="ui secondary basic button" onclick="initFileList(50);">50 Results</button>
                <button class="ui secondary basic button" onclick="initFileList(100);">100 Results</button>
                <button class="ui red basic button" onclick="initFileList(300);">300 Results (Slow)</button>
            </div>
            <div class="ui divider"></div>
            <div id="filelist" class="ui list">
                <div class="item">
                    <div class="content">
                        <div class="header"><i class="loading spinner icon"></i> Loading...</div>
                        <div class="description">
                            <div class="ui breadcrumb" style="margin-top:8px;">
                                <div class="active section">Scanning Local Filesystem. This will take a while.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       <br><br><br>
            
        </div>
        <script>
            initFileList();
            function initFileList(number=20){
                $("#filelist").html(`<div class="item">
                    <div class="content">
                        <div class="header"><i class="loading spinner icon"></i> Loading...</div>
                        <div class="description">
                            <div class="ui breadcrumb" style="margin-top:8px;">
                                <div class="active section">Scanning Local Filesystem. This will take a while.</div>
                            </div>
                        </div>
                    </div>
                </div>`);
                $.get("../../system/disk/space/largeFiles?number=" + number, function(data){
                    $("#filelist").html("");
                    data.forEach(file => {
                        var filepath = file.Filepath.split("/");
                        filepath.pop();
                        filepath = filepath.join("/");
                        $("#filelist").append(`<div class="item">
                            <i class="file icon"></i>
                            <div class="content">
                                <div class="header">${file.Filename} (${bytesToSize(file.Size)})</div>
                                <div class="description">
                                    <div class="ui breadcrumb">
                                        <div class="active section" style="color: #202020 !important;">${filepath}/</div>
                                        <div class="divider"> ( </div>
                                        <a class="section" filepath="${filepath}" onclick="openFileLocation(this);">Open File Location</a>
                                        <div class="divider"> / </div>
                                        <a class="section" filepath="${file.Filepath}" onclick="deleteThisFile(this);">Delete</a>
                                        <div class="divider"> ) </div>
                                    </div>
                                </div>
                            </div>
                        </div>`);
                    });
                });
            }

            function openFileLocation(object){
                var filepath = $(object).attr("filepath");
                ao_module_openPath(filepath);
            }

            function deleteThisFile(object){
                var filepath = $(object).attr("filepath");
                var filename = filepath.split("/").pop();
                if (confirm("Confirm remove: " + filename + " ?")){
                    //Request file system api to remove the file
                    requestCSRFToken(function(token){
                        $.ajax({
                            url: "../../system/file_system/fileOpr",
                            data: {opr: "delete", src: JSON.stringify([filepath]), csrft: token},
                            success: function(data){
                                if (data.error !== undefined){
                                    alert(data.error);
                                }else{
                                    //DONE
                                    initFileList();
                                }   
                            }

                        });
                    });
                }
            }

            function requestCSRFToken(callback){
                $.ajax({
                    url: "../../system/csrf/new",
                    success: function(token){
                        callback(token);
                    }
                })
            }

            function bytesToSize(bytes) {
                var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                if (bytes == 0) return '0 Byte';
                var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
                return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
            }
         
        </script>
    </body>
</html>